<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <link rel="stylesheet" href="https://file.iviewui.com/dev-dist/main.571f0e8d44c31abd00b9.css">
</head>
<body>
<style>
    #login{
        width: 600px;height:700px;margin-left: 35.5%;margin-top:110px;
        background: #ffffff;
        /*box-shadow: 10px 10px 5px 2px #888888;*/
        font-size: 18px;
        border-radius: 5px
    }
    body
    {
        background-image:url('sign_bg.png');
        background-color: #b8e5f8;
        background-repeat:no-repeat;
        background-size:cover;
        overflow:hidden;
    }
    .loginwin{
        text-align:center;border-bottom:1px solid #e8eaec;padding-bottom:16px;margin-bottom:32px
    }
    .ivu-input-with-prefix {
        padding-left: 32px;
    }
    .ivu-input-large {
        font-size: 14px;
        padding: 6px 7px;
        height: 36px;
    }
    .ivu-input-with-prefix {
        padding-left: 32px;
    }
    .ivu-input {
        display: inline-block;
        width: 100%;
        height: 50px;
        line-height: 1.5;
        padding-left: 48px;
        font-size: 20px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        background-image: none;
        position: relative;
        cursor: text;
        transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
    }
    .ivu-form-item-content {
        position: relative;
        line-height: 50px;
        font-size: 20px;
    }
    .ivu-btn-success {
        color: #fff;
        background-color: #39ace3;
        border-color: #39ace3;
    }
    article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
        margin: 5px;
        padding: 0px;
    }
    .iconstyle{
        width:50px;
        height:50px;
        margin-left: 5px;
        margin-top: 11px;
    }
</style>
<div id="app" class="index">
    <div class="ivu-card-body" id="login">
        <div class="loginwin">
            <img src="./logo2.png" alt="">
            <br><span>欢迎登录用户管理系统</span>
        </div>
        <form id="loginForm"  method="post" autocomplete="off" class="ivu-form ivu-form-label-top">
            <div class="ivu-form-item ivu-form-item-required">
                <label class="ivu-form-item-label" style="font-size: 18px;">用户名</label>
                <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                        <!----> <!---->
                        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input name="username" required autocomplete="off" spellcheck="false" type="text" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix" required>
                        <span class="ivu-input-prefix">
                            <Icon type="md-contact" size="30" class="iconstyle"></Icon></span>
                    </div> <!----></div>
            </div><div class="ivu-form-item ivu-form-item-required">
            <label class="ivu-form-item-label" style="font-size: 18px;">密码</label>
            <div class="ivu-form-item-content">
                <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type"><!---->
                    <input name="password" required autocomplete="off" spellcheck="false" type="password" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix" required>
                    <span class="ivu-input-prefix">
                    <Icon type="md-lock" size="30" class="iconstyle" ></Icon>

                </span>
                    <span class="ivu-input-suffix" >
                        <Icon type="md-eye"  size="20" style="margin-top: 11px;"></Icon><!---->
                    </span>
                </div> <!---->
            </div>
        </div>
            <div class="dev-sign-main-aside">

                    <% if(request.getSession().getAttribute("islogin")==null||request.getSession().getAttribute("islogin").equals("false"))
                        {
                            out.println(" <button type='button' @click='login' class='ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large' style='width: 50%;margin-left: 132px;'><!---->");
                            out.println("<i class='ivu-icon ivu-icon-md-log-in'></i>");
                            out.println("<span>授权登录到用户管理系统</span></button>");
                        }
                        else
                        {
                            out.println(" <button type='button' @click='login' class='ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large' style='width: 50%;margin-left: 132px;'><!---->");
                            out.println("<i class='ivu-icon ivu-icon-md-log-in'></i>");
                            out.println("<span>退出</span></button>");
                        }
                    %>
                <div class="dev-sign-main-aside-tip">
                    <p>
                        第三方登录： &nbsp;&nbsp;
                        <button type="button" @click="thirdpartylogin" class="ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large" style="width: 25%;"><!---->
                            <i class="ivu-icon ivu-icon-md-log-in"></i>
                            <span>莞工登录入口</span>
                        </button>
                    </p>
                    <br>
                    <p>
                        尚未拥有账户？
                        <button type="button" @click="register" class="ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large" style="width: 25%;"><!---->
                            <i class="ivu-icon ivu-icon-md-log-in"></i>
                            <span>注册</span>
                        </button>
                    </p>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data(){
            return {
                theme1:'light',
            }
        },
        methods:{
            register(){
                window.location.href='http://localhost:8080/Register.jsp';
            },
            thirdpartylogin(){
                document.getElementById("loginForm").action="/login/dgut";
                document.getElementById("loginForm").submit();
            },
            login() {
                document.getElementById("loginForm").action="/register";
                document.getElementById("loginForm").submit();
            }
        }
    })
</script>
</body>
</html>